ts入门笔记

// 环境检查

node -v
npm -v
tsc -v

// ts配置

tsc init 生成tsconfig.json
tsconfig.json 配置 rootDir outDir

// 测试ts

写index.ts文件做测试
tsc 把ts文件生成js文件
node ./dist/index.js 看运行结果
node ./src/index.ts 报错，因为ts不能直接运行

// 类型

any 类型 任意类型
never 类型 当函数永远执行不完的时候，就是never
void 类型 当函数没有返回类型的时候，就是void

数组
let arr:number[] = [1,2,3]
let arr:Array = [4,5,6]

元组
let arr:[number, string, boolean] = [1,‘aaa’,true] // 这种是规定了数组的长度，不可以使用数组api去操控元组
arr[0] = ‘bbb’ // 报错 索引0类型应该是数字
arr[3] = 2 // 报错 没有索引3
arr.push(333) // 这个可以运行成功，因为ts最终会转换成js。但是不建议这样使用，元组尽量用索引去操控，避免数组api操控

对象
class Ren{
name: string
age: number
sex?: string
constructor(name:string, age:number, sex:string){
this.name = name
this.age = age
this.sex = sex
}
}
let ren1:Ren = new Ren(name:‘小明’, age:18, sex:‘男’) // 注意，用new，走的是constructor，sex是必填
let ren2:Ren = { name:‘小花’, age:16 } // 用直接赋值，走的是class的属性声明，sex是选填

枚举
enum ErrorCode {
Success = 200,
NotFoundError = 404,
ServerError = 500,
OtherError = -1
}
function getList(type:string):ErrorCode{
if(type === ‘Success’){
return ErrorCode.Success
}else{
return ErrorCode.OtherError
}
}

interface
interface User{
readonly username: string // 只读属性
password: string
[props:string]: any // 多余不确定类型的属性
}
let obj:User = {
username: ‘admin’,
password: ‘123’,
nickname: ‘管理员’
}
obj.username = ‘adad’ // 报错，因为username是只读的，只能初始化，不能赋值

interface声明函数
interface Func{
(name:string): string
}

使用type合并类型
interface User{ name:string, age:number }
interface Admin{ name:string, password:string }
type Person = User | Admin
let arr:Array = [{
name: ‘小明’,
age: 18
},{
name: ‘admin’,
password: ‘123’
}]

泛型
function test(arg:T):T{
return arg
}
let res:string = test(‘你好’)
let res:number = test(123)

// 装饰器 Decorators

一般用的很少，封装组件做数据拦截处理，业务上用的不多
启动ts装饰器，可以在tsconfig.json启用experimentalDecorators
{
“compilerOptions”: {
“target”: “ES5”,
“experimentalDecorators”: true
}
}

// 模块和命名空间

基本用的很少，ts模块管理跟es6的模块管理方式基本一致
命名空间 namespace 是为了预防名字冲突，但是相对麻烦，知道是啥就行了，基本没有场景用到

// d.ts的使用方式

d.ts文件的作用就是用来描述文件类型，类型识别器默认寻找node_modules/@types文件夹来检索全局类型。
可以在tsconfig.json文件中配置typeRoots来修改d.ts的存放位置。
{
“typeRoots’: [”./types"]
}