TS类型声明

一、安装并测试自动编译
- 1.自动编译测试
二、ts类型注解
三、基础类型
- undefined 和 null报错
四、数组
五、元组 Tuple
六、枚举类型
七、any类型 (动态内容)
八、void类型 (没有类型)
九、object
十、联合类型
- 1.类型断言
- 2.类型推测
十一、接口
- 1.约束(对象)属性
- 2.约束函数(搜索示例)
- 3.类类型(接口约束类)
- 4.一个类可以实现多个接口(见3)
- 5.接口继承接口(见3)

写TS比写JS多了一步就是编译。
在ts中声明变量时可以指定变量的类型

尚硅谷官方文档

一、安装并测试自动编译

1.命令行安装自动编译命令

tsc --init

2.修改配置中的输出js存储位置和关闭严格模式

"outDir": "./js",                                   /* 将ts自动编译成的js的输出目录改为当前文件夹下的js文件夹 */
"strict": false,                                    /*关闭严格模式 */

3.启动监视，自动编译ts为js

启动监视任务:
终端 -> 运行任务 -> 监视tsconfig.json

1.自动编译测试

1.html：

<!--* @LastEditors: 一只爱吃萝卜的小兔子* @Date: 2022-06-27 13:51:04* @LastEditTime: 2022-06-27 13:51:29* @FilePath: \TypeScript-learn\02_ts在vscode中自动编译\index.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>自动编译成果</title></head><body><script src="./js/index.js"></script></body>
</html>

2.ts：

/** @LastEditors: 一只爱吃萝卜的小兔子* @Date: 2022-06-27 13:51:33* @LastEditTime: 2022-06-27 13:52:42* @FilePath: \TypeScript-learn\02_ts在vscode中自动编译\index.ts*/
(() => {function sayHello(name) {return name + ',你好啊!'}let name = "通天教主"console.log(sayHello(name))
})();

3.自动编译的js

/** @LastEditors: 一只爱吃萝卜的小兔子* @Date: 2022-06-27 13:51:33* @LastEditTime: 2022-06-27 13:52:42* @FilePath: \TypeScript-learn\02_ts在vscode中自动编译\index.ts*/
(() => {function sayHello(name) {return name + ',你好啊!';}let name = "通天教主";console.log(sayHello(name));
})();

结果：

二、ts类型注解

约束函数和变量，
在对应变量或函数加上限制：

变量：变量类型

function 函数名():返回值类型{ 函数体 }

ts：

(() => {function sayHello(name: string) {return name + ',你好啊!'}let name = "通天教主";// let name = [1, 2, 3]; //Argument of type 'number[]' is not assignable to parameter of type 'string'.console.log(sayHello(name))
})();

三、基础类型

(() => {// 布尔类型// 基本语法// let 变量名:类型 = 值let flag: boolean = trueconsole.log("布尔值 boolean")console.log(flag)console.log('--------------------------------------------------')// 和 JavaScript 一样，TypeScript 里的所有数字都是浮点数( number )。 console.log("浮点数 number")let num1: number = 10 // 十进制let num2: number = 0b1010  // 二进制let num3: number = 0o12 // 八进制let num4: number = 0xa // 十六进制console.log(num1)console.log(num2)console.log(num3)console.log(num4)console.log('--------------------------------------------------')// string 表示文本数据类型，单（双）引号，反引号console.log("字符串 string")let str1: string = "一切命运的馈赠"let str2: string = "早已明码标价"console.log(`${str1},${str2}.`)// + 拼接字符串和数字let num: number = 1let str: string = '命运的重量'console.log(str + num)
})()

undefined 和 null报错

修改 tsconfig.json
如果关闭strictNullChecks，则 null 和 undefined 两种类型是任意类型的子类型, 自编译运行不会报错

"strictNullChecks": false,                         /* When type checking, take into account 'null' and 'undefined'. */

基础类型代码补充

  // undefined 和 null 类型是所有类型的子类型。, 也就是说可以赋值给其他类型(要关闭自编译严格模式)str = undefinednum = nullconsole.log(str, num)

四、数组

数组内的所有数据的数据类型必须和定义的一样：

// 数组:
// 语法一:
// let 变量名: 数据类型[] = [value1,value2,...];
let arr1: number[] = [1, 3, 5, 7];
console.log(arr1);// 语法二:泛型写法
// let 变量名: Array<数据类型> = [value1, value2, ...];
let arr2: Array<number> = [2, 4, 6, 8]
console.log(arr2)

五、元组 Tuple

数组内的数据类型和对应位置定义的一样：

let arr3: [number, string, boolean] = [1, '小欢', false]
console.log(arr3)
console.log(arr3[1].split(''))
console.log(arr3[0].toFixed(2))

六、枚举类型

常用且个数固定, 写成枚举类型

枚举内的每个数据都是一个元素，下标从0开始。
语法：

// enum 枚举名{//   枚举元素1,枚举元素2,枚举元素3(可以是中文,但是不推荐)
// }
// 使用下标,输出枚举元素,反之亦可.

用法1:
枚举下标和枚举元素之间的关系

enum Color {green, blue, red
}
let myColor: Color = Color.blue
console.log(myColor)  // 1
console.log(Color)
console.log(Color[0]) // green

用法二:
修改枚举下标(green = 1),结果如下:

enum Color {green = 1, blue, red //
}
let myColor: Color = Color.blue
console.log(myColor)
console.log(Color)
console.log(Color[1]) //

注意:
从修改位置起, 后面每个枚举元素下标按顺序加一
也可以指定每个枚举元素的下标.

七、any类型 (动态内容)

// any类型
// 用法1:不清楚什么类型,或是只知道部分数据类型
let str: any = 100
console.log(str)
str = `静夜诗
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。`
console.log(str)// 用法2:不同数据类型的数组
let arr: any[] = []
arr.push(100)
arr.push('魑魅魍魉')
arr.push(true)
console.log(arr)

不足:
any[]调用不同数据类型的对应方法时没有提示.

八、void类型 (没有类型)

void 类型像是与 any 类型相反，它表示没有任何类型。
用法：当一个函数没有返回值时，你通常会见到其返回值类型是 void：

// 例1：
(() => {function sayHello(): void {let bb = 'baby'console.log(bb)}sayHello()
})()// 例2:
(() => {function sayHello(): string {let bb = 'baby'return bb;}console.log(sayHello())
})()

结果都是

九、object

object 表示非原始类型，也就是除 number，string，boolean之外的类型。
使用 object 类型，就可以更好的表示像 Object.create 这样的 API。

  function getObj(obj: object): object {console.log(obj)return obj}console.log({ name: 'father', nick: '爸爸' })console.log(new String('床前明月光'))// new 一个String对象console.log(String)

十、联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种
需求1: 定义一个一个函数得到一个数字或字符串值的字符串形式值

// 给定类型的一种function getString(x: number | string): string {return x.toString()}console.log(getString(123))console.log(getString('123'))

结果：

1.类型断言

只是在编译阶段起作用, 告诉编译器，“相信我，我知道自己在干什么”。

类型断言(Type Assertion): 可以用来手动指定一个值的类型
语法:
方式一: <类型>变量名
方式二: 变量名 as 类型 tsx中只能用这种方式

  function getLength(x: number | string): number {// return x.toString().lengthif ((<string>x).length) {// x.length存在吗return (<string>x).length} else {return x.toString().length}}console.log(getLength(123))console.log(getLength('123456'))

2.类型推测

TS会在没有明确的指定类型的时候推测出一个类型

有下面2种情况: 1. 定义变量时赋值了, 推断为对应的类型. 2. 定义变量时没有赋值, 推断为any类型

  let aa = 123//定义时赋值,会被推断为对应类型// aa='abc' 报错let bb; //bb = 123console.log(bb)console.log(typeof bb)bb = 'abc'console.log(bb)console.log(typeof bb)

十一、接口

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。
用接口（Interfaces）定义对象的类型。接口是对象的状态(属性)和行为(方法)的抽象(描述)

1.约束(对象)属性

  // 需求: 创建人的对象, 需要对人的属性进行一定的约束// id是number类型, 必须有, 只读的// name是string类型, 必须有// age是number类型, 必须有// sex是string类型, 可以没有// 接口可以作为对象的类型,约束对象的属性和方法// 只读属性 可选属性 interface IPerson {readonly id: number//只读name: string//必须有age: number//必须有sex?: string//可以没有}let person: IPerson = {id: 1,name: '夏洛特',age: 18}console.log(person)person.sex = '男'console.log(person)// person.id=10 //报错

2.约束函数(搜索示例)

接口可以描述函数类型(参数的类型与返回的类型)
用接口定义一个调用签名:
1.只有参数列表和返回值类型的函数定义。
2.参数列表里的每个参数都需要名字和类型。

  // 1.定义函数接口// I表示接口 Search表示查找 Func表示约束函数interface ISearchFunc {// 参数  返回值类型(source: string, subString: string): boolean}// 2.使用函数接口约束函数const searchSubString: ISearchFunc = function (source: string, subString: string): boolean {return source.search(subString) > -1}console.log(searchSubString("你更好看了", '看'))console.log(searchSubString("你更好看了", '她'))

3.类类型(接口约束类)

接口约束类, 类实现接口
一个接口可以继承多个接口
一个类可以实现多个接口

  // 接口类型 : 接口约束类// 1.定义接口interface IFly {fly(): any}interface ISwim {swim(): any}// 2.一个接口可以继承多个接口interface IFlyAndSwim extends IFly, ISwim { }// 3.一个类可以实现多个接口// class Person1 implements IFly, ISwim {//等价class Person1 implements IFlyAndSwim {fly() {console.log('我是Person1的fly函数')}swim() {console.log('我是Person1的swim函数')}}let per1 = new Person1()per1.fly()per1.swim()

4.一个类可以实现多个接口(见3)

5.接口继承接口(见3)

前端之TS类型注解、接口（vscode自编译ts→js）相关推荐

三步让你的 vscode 自动编译ts文件
三步让你的 vscode 自动编译ts文件 TypeScript环境安装与如何在vscode实现自动编译ts文件? 文章目录三步让你的 vscode 自动编译ts文件前提条件环境安装自动编译 ...
ts文件编译与运行,vscode自动编译
ts文件编译与运行根据官方文档提示,ts文件无法直接运行,需要编译成js文件. 1.那么问题就来了,如何把ts文件编译成js文件呢? 官方文档说,Visual Studio 2017和Visual ...
ts类型声明declare
类型声明declare 1.概览 1.1 declare是什么前提:假如现在有一门用Typescript写的库,想供其他开发人员使用,有两种方式方式1 打包ts源文件(供ts用户使用)和编译后的j ...
VScode中html怎么引入js,vscode中如何使用typescript,如何自动编译成js文件
使用vscode创建一个typescript程序 1:介绍 typescript是一个跨平台的编程语言,专门用于前端的语言,是由微软开发,在2013年6月正式发布,它是javascript的超集,扩展 ...
【TS】ts的使用和类型注解
全局安装Ts npm install -g typescript 检查ts版本 tsc -V 安装完ts后,在文件夹新建 xxx.ts文件,html可以引入,但此时引入ts会报错,解决问题如下: 在使 ...
TypeScript笔记（4）—— TypeScript中的类型注解
TypeScript(4):类型注解 [导读]JavaScript是若类型语言,而TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式,为我们提供了静态类型分析能力,这样我们就可以 ...
Typescript助力项目开发：JS切换TS、TS类型定制与思考
TS已经成为可以帮助项目顺利开发的存在了.在上半年笔者就被要求采用TS开发新的项目,并在一些老项目中用TS去改造(因为沟通原因我以为某个远程组件只有TS版本).在其中也有了一些思考. 首先是目录结构. ...
「译」ECMAScript 提案：类型注解（TypeScript 在未来可能被纳入 ECMAScript 中）
原文标题:ECMAScript proposal: Type Annotations 原文链接:github.com/tc39/propos- ECMAScript 关于类型注解的提案已进入 stag ...
3. 10分钟学会ts类型之 ts新增类型
回顾下ts新增类型联合类型自定义类型(类型别名) 接口元组字面量类型枚举 void .....等等 3.1联合类型当一个数组中既是string,也可以是number类型时怎么实现呢? 这时 ...
Springboot-Vue-MybatisPlus 返回给前端的 Long类型数据失去精度怎么办之 Long类型作为实体类的一个属性
Springboot-Vue-MybatisPlus 返回给前端的 Long类型数据失去精度怎么办? 在将自己的Mybatis的系统转换为Mybatis-Plus的时候,遇到了许多问题. 今天的问题是 ...

前端之TS类型注解、接口（vscode自编译ts→js）