1、安装:npm install typescript -g
2 、定义静态类型:static typing
const count:number = 918;
const myName:string ="abc";
// null,undefinde,boolean,void,symbol
// a对象类型,b数组类型,c对象类型,d函数类型
const a :{name:string,age?:number} ={name:"aa"}
const b :string[]=['ab','cd'];
class p{}
const c:p = new p() //对象类型
const d:()=>string = ()=>{return "1"}
3、 type annotation 类型注解 type inference 类型推断
- 如果
TS
能够自动分析变量类型, 我们就什么也不需要做了 - 如果
TS
无法分析变量类型的话, 我们就需要使用类型注解
4、函数参数返回类型:
// type annotation 类型注解
// type inference 类型推断
function sayHello({ one, two }: { one: number; two: number }): void {
console.log("helloWorld");
}
5、类型别名:
const arr:(string|number)[] =[1,2,'a']
// type alias
type Dd = { name: string, age: Number };
class Madam {
name: string;
age: number;
}
const xiaoJieJies: Dd[] = [
{ name: "aa", age: 18 },
{ name: "bb", age: 28 },
];
6、元组
// 元组 解决了数组类型 csv
const xiaojiejies: [string, string, number][] = [
["dajiao", "teacher", 28],
["liuying", "teacher", 18],
["cuihua", "teacher", 25],
];
7、接口
// 接口
interface Student {
name: string;
age: number;
score: number;
[propname: string]: any; //其他
}
const screenResume = (Student: Student) => {
Student.age < 24 && Student.score >= 90 && console.log(Student.name + "进入面试");
Student.age > 24 || (Student.score < 90 && console.log(Student.name + "你被淘汰"));
};
const getResume = (Student: Student) => {
console.log(Student.name + "年龄是:" + Student.age);
console.log(Student.name + "fen是:" + Student.score);
};
const Student = {
name: "dd",
age: 18,
score: 94,
};
screenResume(Student);
getResume(Student);
接口限制类
class XiaoJieJie implements Girl {}
interface Teacher extends Girl {
teach(): string;
}
8、类的概念:
class Lady {
content = "Hi,dd";
sayHello() {
return this.content;
}
}
class XJ extends Lady {
集成
sayHello() {
return super.sayHello() + "。你好!";
}
sayLove() {
return "I love you";
}
}
const goddess = new XJ();
console.log(goddess.sayHello());
console.log(goddess.sayLove());
private、protected和public,也是三种访问类型
构造函数的关键字是constructor
class Person{
constructor(public name:string){}
}
class Teacher extends Person{
constructor(public age:number){
super('abc')
父类没有构造函数,子类也要使用super()
}
}
const teacher = new Teacher(18)
console.log(teacher.age)
console.log(teacher.name)
类的 Getter 和 Setter
class D{
constructor(private _age:number){}
get age(){
return this._age-10
}
set age(age:number){
this._age=age
}
}
static
,这样就不用 new 出对象就
class Girl {
static sayLove() {
return "I Love you";
}
}
console.log(Girl.sayLove());
抽象类,
abstract class Girl{
abstract skill() //因为没有具体的方法,所以我们这里不写括号
}
class seniorTeacher extends Girl{
skill(){
console.log('xx!')
}
}
10、配置文件
11、类型保护,断言 4种守护方式
interface Waiter {
anjiao: boolean;
say: () => {};
}
interface Teacher {
anjiao: boolean;
skill: () => {};
}
function judgeWho(animal: Waiter | Teacher) {
if (animal.anjiao) {
(animal as Teacher).skill();
}else{
(animal as Waiter).say();
}
}
function judgeWhoTwo(animal: Waiter | Teacher) {
if ("skill" in animal) {
animal.skill();
} else {
animal.say();
}
}
function add(first: string | number, second: string | number) {
if (typeof first === "string" || typeof second === "string") {
return `${first}${second}`;
}
return first + second;
}
function addObj(first: object | NumberObj, second: object | NumberObj) {
if (first instanceof NumberObj && second instanceof NumberObj) {
return first.count + second.count;
}
return 0;
}
11、枚举
enum Status {
MASSAGE =1,
SPA,
DABAOJIAN,
}
12、泛型
function myFun<ANY>(params: ANY[]) {
return params;
}
myFun < string > ["123", "456"];
定义多个泛型,比如第一个泛型用T,第二个用P代表
泛型也是支持类型推断的,比如下面的代码并没有报错,这就是类型推断的功劳
interface Girl {
name: string;
}
class SelectGirl<T extends Girl> {
constructor(private girls: T[]) {}
getGirl(index: number): string {
return this.girls[index].name;
}
}
const selectGirl = new SelectGirl([
{ name: "dd" },
{ name: "cc" },
{ name: "aa" },
]);
console.log(selectGirl.getGirl(1));
约束
class SelectGirl<T extends number | string> {
//.....
}
命名空间
npm init -y
; 、、,创建package.json文件。
tsc -init
; ,生成tsconfig.json文件。
; 新建src和build文件夹,再建一个index.html文件。
; 在src目录下,新建一个page.ts文件,这就是我们要编写的ts文件了。
; 配置tsconfig.json文件,设置outDir和rootDir(在 15 行左右),也就是设置需要编译的文件目录,和编译好的文件目录。
; 然后编写index.html,引入<script src="./build/page.js"></script>,当让我们现在还没有page.js文件。
; 编写page.ts文件,加入一句输出console.log('jspang.com'),再在控制台输入tsc,就会生成page.js文件
; 再到浏览器中查看index.html文件,如果按F12可以看到jspang.com,说明我们的搭建正常了。
Require.js 的 CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
<body>
<script>
require(["page"], function (page) {
new page.default();
});
</script>
</body>
npm init -y,创建package.json文件
在终端中输入tsc --init,创建tsconfig.json文件
修改tsconfig.json配置rootDir和outDir.
新建src文件夹,在里边建立index.html,page.ts文件
编写index.html文件,并引入page.ts文件
编写page.ts文件。
yarn add --dev parcel@next