npm install typescript -g
安装之后,会自动注册一个tsc命令,下面图片代表安装成功
浏览器不能直接运行ts代码,需要编译为js代码再运行
创建一个hello.ts文件
const count: number = 100
console.log(count);
执行 tsc hello.ts命令,会生成一个hello.js的文件
var count = 100;
console.log(count);
运行node hello.js 得到以下结果,手动编译完成
命令:
npm create vite@latest ts-project -- --template vanilla-ts
命令说明:
npm create vite@latest 使用最新版本的vite创建项目
ts-project 项目名
-- --template vanilla-ts 创建项目使用的模板为原生ts模板,这里是模板是可以换的,参考vite官网(https://cn.vitejs.dev/guide/)
const count: number = 100
const str: string = '123'
const flag: boolean = true
const a: null = null
const b: undefined = undefined
const arr: number[] = [1, 2, 3] //推荐这种写法
const array: Array<number> = [1, 2, 3]//泛型写法,不推荐
// 联合类型 数组成员既可以是number又可以是string
const arr1: (string | number)[] = [1, '2']
// 类型别名 用type声明
type typename = (string | number)[]
const arr2: typename = [1, '2']
type a = number | string[] //既可以赋值为number类型,又可以赋值为都是字符串的数组
// 函数类型 给函数的参数和返回值添加类型约束
// 开发常用
function add(param1: number, param2: number): number {
return param1+param2
}
// 分开注解(开发常用)
const add1 = (param1: number, param2: number) : number=> {
return param1+param2
}
// 整体注解(库文件常用)
type addFn = (param1: number, param2: number) => number
const add2: addFn = (a, b) => {
return a+b
}
// 可选参数(可选参数需要放在必选参数后面)
function add3(a:string,b?:string):string {
if (b) {
return `${a}${b}`
} else {
return a
}
}
// 无返回值 void
function add4(arr:number[]):void {
arr.forEach(item => {
console.log(item);
})
}
// interface接口类型
// 在TS中使用interface接口来描述对象数据的类型,常用于给对象的属性和方法添加类型约束
// 应用场景:前后端通信
interface Person {
name: string
age:number
}
const person: Person = {
name: 'zhangsan',
age:18
}
// 接口的可选设置
interface Person1 {
name: string
age?:number //年龄可不传
}
// 接口的继承 接口的很多属性是可以进行类型复用的,使用extends实现接口即成,实现类型复用
interface Person2 {
name: string
age:number
}
interface Person3 extends Person2 {
score:string
}
const person1: Person3 = {
name: 'jack',
age: 18,
score:'98'
}
// type注解对象类型
type Person4 = {
name: string
age?:number
}
type Person5 = {
name: string
age:number
}
type Person6 = Person5 &{
score:string
}
const person3: Person6 = {
name: 'jack',
age: 18,
score:'98'
}
//写嵌套的对象
type data = {
title: string
content:string
}
type response = {
code: number
msg: string
data:data
}
const json: = {
code: 200,
msg: '23',
data: {
title: '12312',
content:'1231233424'
}
}
interface和type对比
// 普通类型声明的string类型的变量,可以赋任何string类型的值
let str: string
str = '123'
str = '456'
// 子面量声明的变量,只能赋值123,赋值456会报错
let str1: '123'
str1 = '123'
str2 = '456'
// 应用场景
let Gender: '男' | '女'
Gender = '女'
// 编写下面对象
// {
// code: 200,//可能有200 400 500
// message:'成功'
// }
type Res = {
code: 200 | 400 | 500
message:string
}
const res: Res = {
code: 600, //只能从200 400 500中选择
message:'好的'
}
子面量类型通常搭配联合类型(|)使用
子面量类型声明的变量更精确,提供精确的可选范围
在ts中存在类型推断机制,在没有给变量添加类型注解的情况下,Ts也会给变量提供类型。
// 1、变量声明
let age = 18
age = false //这时会报错,age只能赋值number类型
// 2、函数返回值
function fun(a:number,b:number) {
return a+b
}
const aa = fun(1, 2)
//鼠标移动到aa上面,会显示aa是number类型,
// 但是我们并没给返回值进行类型注解,是ts根据两个number类型的变量推断的,
// number + number,返回值只能是number
变量被注解为any类型之后,ts会忽略类型检查,错误的类型赋值不会报错,也不会有任何提示,不推荐使用