TypeScript总结
安装及使用
安装
npm install typescript -g
或
yarn global add typescript
使用
新建demo.ts：
function test() {
let web: string="hello world"
console.log(web);
}
test();
编译：
tsc temo.ts
node temo.js
或
npm install -g ts-node
安装成功后：
ts-node Demo1.ts
静态类型
被定义后就不可改变该亦是的类型了。
js是弱类型语言，可以被改变。
基本使用
// 定义count是number类型
const count : number = 1;
count = 'hello'; // 此时改变类型为string就会报错编译不通过
自定义静态类型
interface XisoJieJie {
uname: string,
age: number
}
const xh : XisoJieJie = {
uname: '小红',
age: 15
}
console.log(xh);
基础静态类型和对象类型
静态类型
null,undefinde,symbol,boolean，void等。
对象类型
- 对象类型
- 数组类型
- 类类型
- 函数类型
对象类型
const xiaoJieJie: {
name: string,
age: number
} = {
name: '小明',
age: 14
}
console.log(xiaoJieJie.name)
数组类型
const arr : number [] = [1,2,3];
const xiaoJieJies : String [] = ['小明','小红','小黄'];
console.log(xiaoJieJies)
类类型
class Person{}
const xm : Person = new Person();
console.log(xm);
函数类型
const j : () => string = ()=> {return '小明'};
console.log(j);
类型注释和类型推断
类型注释
let count : number;
count = 123
类型推断
let countInference = 123
这时编辑器和编译器都会推断出是number类型。
函数参数和返回类型定义
类型定义
无定义时：
function getTotal(one : number, two :number){
return one + two
}
const total = getTotal(1,2)
虽然能推断出是返回number，但这样不规范。
定义时：
function getTotal(one : number, two :number) : number{
return one + two
}
const total = getTotal(1,2)
无需return时：void
function sayHello(){
console.log('hello world!);
}
异常或死循环：never返回值类型
异常：
function errorFuntion() : never{
throw new Error()
console.log('Hello World')
}
死循环：
function forNever() : never{
while(true){}
console.log('Hello JSPang')
}
函数参数为对象（解构）时
TS函数参数解构：
function add ({one, two} : {one: number, two: number}) {
return one + two;
}
const three = add({one:1,two:3});
console.log(three); // 4
ES6函数参数解构：
function add({x,y} = {}){
return x+y;
}
var sum = add({x:3,y:5});
console.log(sum); // 8
数组
各种类型
const numberArr : number [] = [1,2,3];
const stringArr : string [] = ['a','b','c'];
const undefinedArr : undefined [] = [undefined, undefined];
const emptyArr : null [] = [null,null];
const arr : (number | string) [] = [1,'a',1,2,'b'];
// 类型别名
type Lady = {name: string, age: number};
const xiaoJieJies: Lady[] = [{
name: '小明',age:14
},{
name: '小红', age: 35
}]
class Lady1 {name: string;age: number};
const xiaoJieJies1: Lady1[] = [{
name: '小明',age:14
},{
name: '小红', age: 35
}]
type和class的区别是class会编译出来，type会忽略。
元组
// 无约束
const arr1 : (number | string) [] = [1,'a',1,2,'b'];
// 有约束
const arr2 : [string,string,number] = ['a','b',3];
接口
定义接口
interface Girl {
name: string;
age: number;
bust: number
}
const getResume = (girl: Girl) => {
console.log(girl.name);
}
const xh = {
name: '小红',
age: 19,
bust:38
}
getResume(xh);
接口(interface)和类型别名(type)的区别
- 类型别名可以直接给类型，比如
string，但接口必须给对象。
接口定义非必填值?:
语法：?:
interface Girl {
name: string;
age: number;
bust ?: number
}
接口允许加入任意值[anyname:string]:any;
语法：[anyname:string]:any;
string的意思是对象名是string类型，any的意思是对象值是任意类型。
interface Girl1 {
name: string;
age: number;
bust ?: number;
[anyname:string]: any;
}
const xh = {
name: '小红',
age: 19,
sex:'女',
hobby:'兴趣',
year:22
}
接口里定义方法
语法：fun(): type
比如：say(): string;代表say方法返回string类型的值。
interface Girl1 {
name: string;
age: number;
bust ?: number;
[anyname:string]: any;
say(): string;
}
const xh = {
name: '小红',
age: 19,
sex:'女',
hobby:'兴趣',
year:22,
say(){
return 'hello World!';
}
}
类实现接口
类实现接口时必须把所有要必填的属性和方法实现，否则就会报错。
错误的：
class XiaoJieJie implements Girl{
}
正确的：
class XiaoJieJie implements Girl{
name = '小红';
age = 12;
bust= 90;
say(){
return '你好'
}
}
console.log(XiaoJieJie)
接口继承接口
重点：
interface...extends；function里面的约束定型改为新接口名；- 新的对象里面除了原接口约束的属性，也要把新的属性加上。
interface Teacher extends Girl {
teach():string;
}
const getResume2 = (girl: Teacher) => {
...
girl.teach();
}
const girl2 = {
... // girl的所有属性
teach(){
return 'hello';
}
}
getResume2(girl2);
自我总结
接口更像是一种约束，约束用户的对象的属性类型。
类
继承与重写
class Lady {
content = 'hello world!';
sayHello () {
return this.content
};
}
class XiaoJieJie extends Lady {
sayLove () {
return 'I love you.'
};
sayHello () {
return super.sayHello() + ' 你好！';
}
}
JAVA中类的继承
class Animal{
public void move(){
System.out.println("动物可以移动");
}
}
class Dog extends Animal{
@Override // 表示方法重写
public void move(){
super.move(); // 引用父类的方法
System.out.println("狗可以跑和走");
}
}
区别：
- java中要用到
@Override标签
@Override标签的作用与好处
- 它是伪代码，表示方法重写
- 作为注释，帮助检查是否正确复写了父类中已有的方法
- 编译器可以验证该方法是否在父类中已有
- 非必填。如果没写@Override，方法名与父类一模一样，如果返回类型相同，视为重写，反之，视为新方法
访问类型
public
默认就是它
private
私有，只有自己能用。
class Lady {
private content = 'hello world!';
private privateFn () {
return 'private' + this.content; // 能用
};
}
class XiaoJieJie extends Lady {
privateFn() { // 编译不通过
return 'e';
};
}
console.log(new Lady().privateFn()); // 编译不通过
protected
受保护，只能在自己及子类用。
class Lady {
protected protectedFn () {
return 'protected';
};
}
class XiaoJieJie extends Lady {
protectedFn () {
return 'xj';
}
}
console.log(new Lady().protectedFn()); // 编译不通过
对比表
| 类型 | public | protected | private |
|---|---|---|---|
| 自己（父类） | ✓ | ✓ | ✓ |
| 继承（子类） | ✓ | × | × |
外部（new Class().fun()） |
✓ | ✓ | × |
附：JAVA异同表
| 类型 | public | protected | private |
|---|---|---|---|
| 自己（父类） | ✓ | ✓ | ✓ |
| 继承（子类） | ✓ | ✓ | × |
外部（new Class().fun()） |
✓ | × | × |
构造函数
构造函数及继承
class People {
constructor (public name: string,public sex:string) {
this.name = name;
this.sex = sex;
}
}
class Teacher extends People {
constructor (public age:number){
super('小明','女');
}
}
var people = new People('小红','女');
console.log(people.name)
var teacher = new Teacher(19);
console.log(teacher,teacher.age);
ES6实现对比：
class People {
constructor (name,sex) {
this.name = name;
this.sex = sex;
}
}
class Teacher extends People {
constructor (name,sex,age){
super(name,sex);
this.age = age;
}
}
var people = new People('小红','女');
console.log(people.name)
var teacher = new Teacher('小明','女',19);
console.log(teacher,teacher.age);
JAVA实现对比：
class People {
public String name;
public int sex;
public People (String name){System.out.println(name)};
public People (int sex ){};
public People (Stirng name, int sex){}
public People (){}
}
public class Teacher extends People {
...
}
get和set
class XiaoJieJie {
constructor(private _age:number,private _name: string){
}
get age(){
return this._age-2;
};
set age(age:number){
this._age = age;
}
get name(){
return this._name+'人';
};
set name(name:string){
this._name = name;
}
}
const xj = new XiaoJieJie(18,'小明');
console.log(xj,xj.age); // XiaoJieJie { _age: 18, _name: '小明' } 16
编译如果无法通过需要加上es5：
tsc demo.ts -t es5
node demo.js
java中
class Stutent1{
private String name;
private int age;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public void showStu1(){
System.out.println("学生叫做"+name+",年龄"+age);
}
}
static装饰符
不用new新建就可以创建
class Girl {
static sayLove(){
return '你好';
}
}
console.log(Girl.sayLove());
不用new Girl()就可以调用方法了。
只读属性readonly
class XiaoJieJie {
constructor(private readonly _age:number,private _name: string){
}
get age(){
return this._age-2;
}
set age(age:number){ // 报错
this._age = age;
}
get name(){
return this._name+'人';
};
set name(name:string){
this._name = name;
}
}
const xj = new XiaoJieJie(18,'小明');
xj.name = '小红';
xj.age = 33; // 报错
console.log(xj,xj.age);
抽象类
不加abstract时
特点：
- 普通的类继承
- 普通的重写
- 可以调用父类
class Girl {
skill(){
conso.log('skill)
}
}
class Girl1 extends Girl {
skill(){
console.log('cooking');
}
}
class Girl2 extends Girl {
skill(){
console.log('make cloths')
}
}
class Girl3 extends Girl {
skill(){
console.log('do gardening')
}
}
console.log(new Girl1().skill())
console.log(new Girl2().skill())
console.log(new Girl3().skill())
console.log(new Girl().skill())
加abstract关键字时
特点：
- 不能调用父类
- abstract方法不能有具体实现内容
abstract class Girl {
abstract skill()
}
class Girl1 extends Girl {
skill(){
console.log('cooking');
}
}
class Girl2 extends Girl {
skill(){
console.log('make cloths')
}
}
class Girl3 extends Girl {
skill(){
console.log('do gardening')
}
}
console.log(new Girl1().skill())
console.log(new Girl2().skill())
console.log(new Girl3().skill())
区别：写了abstract关键字就是抽象类，如果不加，就是重写（Override），也视为多态。
多态
多态是同一个行为具有多个不同表现形式或形态的能力。
比如打印机有打印方法，彩色打印机类打印方法是彩色，黑色打印机类打印方法是黑色。
java中多态的实现方式
- 方式一：重写
- 方式二：接口
- 方式三：抽象类和抽象方法
abstract class Animal {
abstract void eat();
}
class Cat extends Animal {
public void eat() {
System.out.println("吃鱼");
}
public void work() {
System.out.println("抓老鼠");
}
}
class Dog extends Animal {
public void eat() {
System.out.println("吃骨头");
}
public void work() {
System.out.println("看家");
}
}
其它：写了abstract关键字就是抽象类，如果不加，就是重写（Override），也视为多态。
配置项
tsconfig.json配置文件
该配置文件通过tsc --init命令行来生成。
include、exclude、files
include属性是用来指定要编译的文件
{
"include":["demo.ts"],
"compilerOptions": {
//any something
//........
}
}
种一棵树最早的时间是十年前，其次是现在。
