typescript学习(更新中)

目录

开发环境搭建

npm i -g typescript

tsc检查是否安装成功

类型如何声明

typescript 复制代码
// 先声明再赋值
let a: number
a = 1

// 直接赋值
let b = 1
typescript 复制代码
function sum(a: number, b: number): number {
    return a + b
}
console.log(sum(1, 2))

有哪些类型

typescript 复制代码
// 可以使用|连接多个类型
let a: number | string

// unknown类型的变量,不能直接赋值给其他变量
let b: unknown
// a = b // 不可
// 可以下面这样写
a = b as number
a = <number>b

// void用来表示空,以函数为例,就表示没有返回值的函数
function fn(): void {}

// never 表示永远不会返回结果
function fn2(): never {
    throw new Error('报错了!')
}

// object {属性名: 属性值, 属性名:属性值}
// 在属性名后边加上?,表示属性可选的
let c: { name: string, age?: number }
c = { name: 'nihao', age: 18 }
c = { name: 'ni' }
// [propName: string]: any 表示任意类型的属性
let d: { name: string, [propName: string]: any}

// 设置函数结构的类型声明
let e: (a: number, b: number) => number
e = (n, m) => {
    return n + m
}
 
// 数组 类型[] Array<类型>
let f: string[]
let g: Array<string>

// 枚举
enum Gender{
    Male = 0,
    Female = 1
}
let h: { gender: Gender }

// &
let i: { name: string } & { age: number }
i = { name: 'aa', age: 18 }

// 类型别名
type myType = 1 | 2 | 3
let j: myType
let k: myType

编译配置文件

创建一个tsconfig.json

typescript 复制代码
{
    /*tsconfig.json 是ts编译器的配置文件,ts编译器可以根据她的信息来对代码进行编译
    "include": [""],用来指定哪些ts文件需要被编译,一个/*表示任意文件,两个/**表示任意文件目录
    "exclude": 不需要被编译的目录,默认["node_modules","bower_components","jspm_packages"]
    "extends":"目录地址", 继承配置文件,可以把两个配置文件合并
    "files":[xxx.ts,xxx.ts]指定被编译的文件列表
    compilerOptions{} 编译器配置
        target: 用来指定ts 编译后的Es版本,默认ES3,,可选值es3,es5,es6,es2015,es2016,es2017,es2018,es2019,es2020,esnext
        lib[] 用来指定项目中要使用的库,一般不动他
        module: 指定要使用的模块化规范,可选值:none commonjs amd system umd es6 es2015 es2020 exnest
        outDir: 用来指定版以后文件所在的目录
        outFile: 将代码合并成一个文件,设置outFile 后 所有的全局作用域中的代码会合并到同一个文件中。
        allowJs: 是否对js文件进行编译,默认false
        checkJs: 是否检查js文件语法
        removeComments: 编译时是否去除注释
        noEmit: 不生成编译后的文件
        noEmitOnError: 当有错误时不生成编译文件

        // 语法检查的属性
        alwaysStrict: 严格模式,用来设置编译后的文件是否使用严格模式,默认false
        noImplicitAny: 不允许使用隐式any
        noImplicitThis: 不允许使用不明确类型this
        strictNullChecks: 严格的检查空值,
        strict: 所有严格模式的总开关,这个属性一定要写在最上面
    */
    "exclude": [
       	"node_modules"
    ],
    "include": ["./src/**/*"]
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES5",
        "sourceMap": true,
        "outDir": "./dist",
       // "outFile": "./dist/app.js"
       "allowJs": false,
       "checkJs": false,
       "removeComments": false,
       "noEmit": false,
       "noEmitOnError": false,
       "strict": false,
       "alwaysStrict": false,
       "noImplicitAny": false,
       "noImplicitThis": false,
       "strictNullChecks": false
    }
}
相关推荐
前端要努力16 小时前
深入解析 TypeScript 的 unknown 和 any:安全性与灵活性的平衡
前端·typescript
郝晨妤2 天前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
红尘炼心2 天前
一个困扰我许久的TypeScript定义问题
前端·react.js·typescript
baiduguoyun2 天前
TypeScript 中的三斜杠指令语法
typescript
潘敬3 天前
flutter 语法糖库 flutter_magic 发布 1.0.1
开发语言·前端·javascript·flutter·typescript
高木的小天才3 天前
HarmonyOS一次开发多端部署三巨头之功能级一多开发和工程级一多开发
前端·华为·typescript·harmonyos
周三有雨4 天前
vue3 + vite 实现版本更新检查(检测到版本更新时提醒用户刷新页面)
前端·vue.js·typescript
清灵xmf6 天前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
Amd7946 天前
Nuxt.js 应用中的 prepare:types 事件钩子详解
typescript·自定义·配置·nuxt·构建·钩子·类型
王解7 天前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试