let ar = 11 // 这里是数值
ar = [] // 偷偷的改成了数组类型
arr.toFixed(2) // 这里会报类型错误
---------------------------------------
npm i -g typescript
tsc 文件名.ts
(1) ts-node安装
npm i -g ts-node
(2) 使用
ts-node 文件名.ts
解释:ts-node 命令在内部偷偷的将 TS -> JS,然后,再运行 JS 代码, 但不会生成js文件, 方便我们学习, 是否安装随意
如有报错:
tsc --init
生成配置文件 tsconfig.json
写代码时,用{}包起来
----------------------------------------------------------------
JS 已有类型
原始类型:number/string/boolean/null/undefined/symbol
对象类型:object
(包括,数组、对象、函数等对象)
TS 新增类型
联合类型
自定义类型(类型别名)
接口
元组
字面量类型
枚举
void
any 等
注意:
原始类型在 TS 和 JS 中写法一致
对象类型在 TS 中更加细化,每个具体的对象(比如,数组、对象、函数)都有自己的类型语法
好了,正式开始吧.
-----------------------------------------------------------
let 变量名: 类型 = 初始值
let age: number = 18
// 错误代码:
// 错误原因:将 string 类型的值赋值给了 number 类型的变量,类型不一致
let age: number = '18'
一句话呗, 给变量指定类型
就是定义多个类型, 用管道符隔开
// |`(竖线)在 TS 中叫做**联合类型**,
// 即:由两个或多个其他类型组成的类型,表示可以是这些类型中的任意一种
let str:string | number = 1
console.log(str)
格式:
let 变量: 类型1 | 类型2 | 类型3 .... = 初始值
有两种写法
let 变量: 类型[] = [值1,...]
let 变量: Array<类型> = [值1,...]
示例:
// 写法1:
let numbers: number[] = [1, 2, 3] // 数组只能放数字类型
// 写法2:
let strings: Array = ['1','2','3'] // 当然只能放字符串类型
// 放多个类型呢?
let arr: (string | number | boolean)[] = []
arr.push(1)
arr.push("abc")
arr.push(true)
console.log(arr);
// 普通函数
function 函数名(形参1: 类型=默认值, 形参2:类型=默认值): 返回值类型 { }
// 箭头函数
const 函数名(形参1: 类型=默认值, 形参2:类型=默认值):返回值类型 => { }
示例:
// 函数声明
function add(num1: number, num2: number): number {
return num1 + num2
}
// 箭头函数
const add = (num1: number=10, num2: number=20): number => {
return num1 + num2
}
add(1,'1') // 报错
上面类型定义都一样, 那可不可以拿出来呢?
当然可以, 那就要说到类型别名了
就是通过type关键字来实现
type 别名 = 类型
type Fn = (n1:number,n2:number) =>number
const add : Fn = (a,b)=>{return a+b }
如果函数没有返回值,那么,函数返回值类型为:void
三种情况满足:
不写return
写return ,但是后面不接内容
写return undefined
如果函数没有指定返回值,调用结束之后,值是undefined的
当不能直接声明返回值是undefined
function greet(name: string): void {
console.log('Hello', name)
//
}
// 错误代码
function add(a:number, b:number): undefined { // 这里的会报错
console.log(a,b)
}
可选参数: 就是在参数后面加问号, 避免和默认值一起用
function mySlice(start?: number, end?: number): void {
console.log('起始索引:', start, '结束索引:', end)
}
给每一个属性定个类型,
const 对象名: {
属性名1:类型1,
属性名2 ?:类型2, // 可选属性
方法名1(形参1: 类型1,形参2: 类型2): 返回值类型,
方法名2:(形参1: 类型1,形参2: 类型2)=>返回值类型
} = { 属性名1: 值1,属性名2:值2 }
示例:
let obj: {
name: string,
age: number,
gender: string,
// 定义方法的两种格式
game: () => {},
play(): string,
say(): void
} = {
name: 'c',
age: 1,
gender: 'n',
game() {
return 1
},
play() {
return '2'
},
say() {
console.log('yes');
}
都可以用type提炼一下,就不演示了
只能用于对象,接口名一般约定用大写 i 开头
跟type相似, 一般还是用type
interface 接口名 {
属性1: 类型1, 属性2: 类型2,
}
示例:
interface IGoodItem {
name: string,
price: number,
func: ()=>string
}
const good1: IGoodItem = {
name: '手表',
price: 200,
func: function() {
return '看时间'
}
}
接口的继承:
interface 接口2 extends 接口1 {
属性1: 类型1, // 接口2中特有的类型
...
}
interface Point2D { x: number; y: number }
// 3D 有了三个属性
interface Point3D extends Point2D {
z:number
}
看不懂别慌,叫的好听而已
元组是另一种特殊的数组:
它确切地包含多少个元素
特定索引对应的类型
示例:
let position: [number, number] = [39.5427, 116.2317]
来模拟一下React中的hook: useState
function useState(n: number): [number, (number)=>void] {
const setN = (n1) => {
console.log('Ez')
}
return [n, setN]
}
const [num ,setNum] = useState(10)
let str1 = 'hello' // string
const str2 = 'hello' // hello
hello类型是什么鬼?
str1 是一个变量(let),它的值可以是任意字符串,所以类型为:string
str2 是一个常量(const),它的值不能变化只能是 'hello ',所以,它的类型为:'hello '
注意:此处的 'Hello ',就是一个字面量类型,也就是说某个特定的字符串也可以作为 TS 中的类型
单个字面量没有什么用处,它一般和联合类型一起使用 , 用来表示一组明确的可选值列表
示例:
// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'
function changeDirection(direction: Direction) {
console.log(direction)
}
// 调用函数时,写上'',就会有类型提示:
changeDirection('up')
----------------------------------------
进阶类型写在另外一篇了, 不然太多
TypeScript 进阶_Grey的博客-CSDN博客