ts ，全称typeScript，是javaScript的超集
一. 基础：
- 安装typeScript
npm install -g typescript
- 编译：
tsc xxx.ts
- 编译优化
tsc --init // 生成tsconfig.json文件
tsc --watch //监听编译
tsc --noEmitOnError --wacth //如果有错误则编译不通过
- 编译降级： 设置tsconfig.json文件中的"target"属性
- 严格模式： 设置tsconfig.json中的 "strict"、"noImplicitAny"、"strictNullChecks"
二. 基本类型：
- 入口文件： tsconfig.json中"rootDir", 输出"outDir"
- 编译： tsc --watch
- 基元类型：string、number、boolean
let str: string = 'hello worle';
let age: number = 12;
let bool: boolean = true
- 数组： 变量名：[] | 变量名： Array
let arr: number[] = [1,3,4]
let arr2: Array<number> = [2,3,4]
- any 不希望类型检查导致错误时使用
let obj: any = {
o: 1
}
obj.foo() //编译可通过，any不做类型校验
- 函数
参数类型注释和返回值类型注释
function greet(name: string):void {
console.log(name)
}
一般来说不需要专门给function定义返回值类型，ts会根据return语句判断函数的返回类型
- 对象类型
function getNum(pr: {x: number, y:number}) { //x,y为必传
console.log(pr.x + pr.y)
}
function getName(name:{first: string, last? : string}) { //first必传，last可选
console.log(name.last?.toLowserCase() // 如果不写，不传last时会报错
}
- 联合类型：两个或者多个其他类型组合成的类型
function printId (id: number | string) {
//console.log(id.toLowserCase()) //如果是id是number类型，编译不通过
//做类型判断
if (typeof id === 'number') {
} else {
}
}
printId(1)
printId('13')
printId(true) // 编译不通过
- 类型别名
//定义
type Point = {
x: number,
y: number
}
type Id = number | string
type userString = string
//使用
function printPoint(pt: Point) {
}
printPoint({x:100,y:200})
- 接口： 定义对象类型的另一种方法
interface Point {
x: number,
y: number
}
function printP(pt: Point) {
}
printP({
x: 100,
y:100
})
类型别名和接口的区别：
几乎所有可以使用 interface定义的类型，都可以通过type别名来定义
区别1: 接口和类型别名的扩展
//接口扩展
interface Animal {
name: string
}
interface Bear extends Animal{
hobby: string
}
//实例
const bear: Bear = {
name: '小熊',
hobby: '蜂蜜'
}
//————————————————————————————————————————————————————————————————
//type扩展
type Animal = {
name: string
}
type Bear = Animal & {
hobby: string
}
const bear: Bear = {
name: '小熊',
hobby: '蜂蜜'
}
区别2: 可以向已有的接口添加属性，但是类型别名创建以后不能更改
interface Win {
count: number
}
interface Win {
key: string
}
const v: Win = {
count: 100,
key: 'haha'
}
- 类型断言
const mycanvas = document.getElementById('canvas') as HTMlCanvasElement
const mycanvas1 = <HTMLCanvasElement>document.getElementById('canvas')
const x = 'hello' as number; //报错，x已经是string类型，无法被断言为number类型
const y = ('hello' as any) as number;
const z = ('hello' as unknow) as number;
- 文字类型
/** 文字类型 */
let x: 'hello' = 'hello';
x = 'x' //编译不通过， x只能是“hello”
//设置联合的文字类型
function prints(x: string, y: 'left' | 'center' | 'right') {
//y传值时只能是left|right|center中的一个
}
/** 数字类型 */
function compare(a: number, b:number): -1|0|1{
//compare返回值只能是1，0，-1其中一种
return a === b ? 0 : a > b ? 1 : -1
}
/** 文字或数字与其他类型组合 */
interface Size = {
width: number
}
function setSize(x: Size | 'auto') {
}
setSize({x: 100})
setSize('auto')
setSize('ss')// 编译不通过
/** 布尔类型 */
let s: true = true //s只能为true
let f: false = false //f只能为false
/** 文字推理 */
function http(url: string, method: 'get'|'post'){
}
interface obj = {
url: 'https://hh.com',
method: 'get'
}
//以下报错，obj中会认为method为string类型，范围太宽了，并不能推断为是get或者post,所以报错
http(obj.url, obj.method)
//三种方式
// 1.
interface obj = {
url: 'https://hh.com',
method: 'get' as 'get
}
//2.
interface obj = {
url: 'https://hh.com',
method: 'get'
}
http(obj.url, obj.method as 'get')
//3.
interface obj = {
url: 'https://hh.com',
method: 'get'
} as const
-
null和undefined类型
-
枚举 (enum)
enum Directions {
Up,
Down,
Left,
Right
}
console.log(Directions.Up) // 0
- bigint和symbol （ts.config.json中"target" : "es2020"）【es2020以上】
