Type Script에 손을 댄 적은 없지만 유형을 요약해 봤습니다.
56276 단어 JavaScriptTypeScript초학자작업 일지tech
먼저
현재 위치는 JavaScript→React→Next입니다.제이스랑 왔기 때문에 타입 스크립트도 하고 싶어요.(JavaScript 이외에 응용 프로그램 제작을 고려할 수 있는 수준은 아님)
아직 잘 모르는TypeScript를 배워서 좋아하게 될 것 같아요.
길거리에서 형식을 정의할 수 있어서 좋은 것 같아요.그래서 제가 유형을 정리해 봤어요.
환경 구조
개인 설치
-g의 전 세계 설치는 환경을 오염시킬 수 있기 때문에 현지 설치를 잘하지 못한다.따라서
tsc 명령만 수행할 수 없기 때문에 경로를 직접 지정하는 방법이나 npx tsc 방법 2가지를 추천합니다.npm install typescript --save-dev ../node_modules/.bin/tsc -v../node_modules/.bin/tsc --init 컴파일../node_modules/.bin/tsc コンパイルしたい.ts에서 실행됩니다.그리하여 node.js 포장을 사용할 수 있습니다.
node index.js 등npm install --save-dev @types/node 명령을 사용하면 경로를 생략할 수 있다.fs 등알림
형식 정의라고 불리는 파일 중, 예를 들어
npx 의 설명은 npx tsc -v 라고 불리는 다른 파일 관리이다.다음 코드는 TypeScript에서 변수를 선언하지 않는 동안 오류가 발생했습니다.
x = 30; // error TS2304: Cannot find name 'x'.
console.log(x); // error TS2304: Cannot find name 'x'.
형식 정의 파일이나 같은 파일에 추가
declare var x: number를 통해 오류를 해결할 수 있습니다.기본적으로 별도로 제작된 유형 정의 파일에 기술하는 것을 추천합니다.
그리고 자바스크립트의 라이브러리 등에는 여러 종류의 정의 파일이 있기 때문에 그것을 사용합니다.이 유형 정의가 있으면 IDE 등의 코드 보완 기능이 제공됩니다.
유형 주석
변수의 옆에
型定義ファイル（.d.ts）를 쓰고 변수의 오른쪽에 유형 주석을 붙인다.let hasValue: boolean = true;
예: 초기 값을 입력할 때 변수 등을 대입하지 않습니다.
let hasValue: boolean;
추론
TypeScript의 유형은 변수의 값에 따라 자동으로 표시됩니다.
객체 유형
const a: object = {
name: "daigakuseidatta",
age: 25,
};
//a.name と実行してもそんなのないと言われる
//オブジェクトリテラル型で型定義する。
const person: {
name: string;
age: number;
} = {
name: "Jack",
age: 21,
};
//オプショナルプロパティを使う(?)
let person: {
age: number;
lastName: string;
readonly first: string;
gender?: string; //?で会ってもなくてもよくなる。
} = {
age: 28,
latsName: "sato",
firstName: "tiaki",
//genderがなくても怒られない。
};
person.gender = "male"; //後から追加できる。
person.lastName = "kobayashi"; //上書きできる。
person.firstName = "kuniko"; //上書き出来ない。
//インデックスシグネチャ
// オブジェクトが複数のプロパティを持つ可能性を示す。
// [key:T]: Uのように定義する。
// keyはstringかnumberのみ
const capitals: {
[countryName: string]: string;
} = {
Japan: "Tokyo",
Korea: "Seoul",
};
capitals.China = "Beijing";
capitals.Canada = "Ottawa";
//ネストする場合
const person: {
name: {
first: string;
last: string;
};
age: number;
} = {
name: {
first: "Jack",
last: "Smith",
},
age: 21,
};
//オブジェクト内に関数がある場合
const Falcon: {
name: string;
fly: () => void;
} = {
name: "鷹",
fly: function (): void {
console.log(this.name + "が大空を飛びました");
},
};
Falcon.fly(); // '鷹が大空を飛びました
정렬된 유형 쓰기
const fruits: string[] = ["Apple", "Banna", "Grrape"];
열거형
특정한 통일형을 받아들이다.
enum CoffeeSize {
SHORT = "SHORT",
TALL = "TALL",
GRANDE = "GRANDE",
VENTI = "VENTI",
}
const coffee = {
hot: true,
//size: 'SHORT'この文字しか入らないようしたい。
//こうすると (prorerty) size: CoffeeSizeという列挙型になる。
size: CoffeeSize.SHORT,
};
//入らない
coffee.size = true;
coffee.size = "SHOT";
//入る
coffee.size = CoffeeSize.SHORT;
union형(합병형)·Intersection형(교차형)
결합 유형
여러 유형을 지정할 때 사용합니다.
A형이나 B형의 임의의 종류가 있다
교차형
A형과 B형 두 종류가 있어요.
교차형은'A와 B가 공통된 형'이 아니다.
//合併型を簡素に使用した場合
let unionType: number | string = 10;
type Knight = {
hp: number;
sp: number;
weapon: string;
swordSkill: string;
};
type Wizard = {
hp: number;
mp: number;
weapon: sting;
magicSkill: string;
};
// 合併型...KnightまたはWizardの型を持つ。
type Adventurer = Knight | Wizard;
// 交差型... KnightかつWizardの型を持つ
type Paladin = Knight & Wizard;
//合併型の場合ここにmpが追加されてもエラーにならない。
//指定された型があってもなくても良い。
const adventure1: Adventure = {
hp: 100,
sp: 30,
//mp: 30,
weapon: "木の剣",
swordSkill: "三連斬り",
};
//Wizard寄りの冒険者
const adventure2: Adventurer = {
hp: 100,
mp: 30,
weapon: "木の枝",
magicSkill: "ファイアボール",
};
//交差型は合併したものが全て揃ってないとだめ。
const paladin: Paladin = {
hp: 300,
sp: 100,
mp: 100, //一つでも型が欠けるとエラーになる。
weapon: "銀の剣",
swordSkill: "日輪",
magicSkill: "アルティメットキャノン",
};
상수형
그것만이 대입할 수 있다.
//エラーになる。
const apple: "apple" = "hello";
//エラーなし。
const apple: "apple" = "apple";
uion형+상량형
let cloathSize: 'small' | 'medium' | 'large' = 'large';
const cloth = {
color: 'white',
size: clothSize
}
//上記の状態ではsizeはリテラル型になって'large'しか受け付けない。
cloth.size = 'small'
//そこでオブジェクトの型定義でユニオンを使用する。
const cloth = {
color: 'white';
//この3つしか入らないくなる。
size: 'small' | 'medium' | 'large'
} = {
color: 'white',
size: 'medium'
}
유형 별칭
아까 거
declare var x: number;를 변수처럼 저장하고 싶어요.//独自の型を定義した感じになる。
type ClothSize = 'small' | 'medium' | 'large'
const cloth = {
color: 'white';
//この3つしか入らないくなる。
size: ClothSize
} = {
color: 'white',
size: 'medium'
}
type Country = {
capital: string
language: string
name: string
}
const japan: Country = {
capital: 'Tokyo',
language: 'Japanese',
name: 'Japan'
}
Interface·Type Alias 사용
2021년에는 마이크로소프트의 인터페이스가 확장되기 쉽다고 한다.이유상 추천합니다.
Interface
interface Bread {
calories: number;
}
interface Bread {
type: string;
}
const francePan: Bread = {
calories: 350,
type: "hard",
};
interface Bread {
calories: number;
}
interface Bread {
type: string;
}
const francePan: Bread = {
calories: 350,
type: "hard",
};
//上記のinterfaceを型エイリアスで表現
type MaboDofu = {
calories: number;
spicyLevel: number;
};
type Rice = {
calories: number;
gram: number;
};
type MaboDon = MaboDon & Rice; // 交差型（Intersection）
const maboDon: MaboDon = {
calories: 500,
spicyLevel: 10,
gram: 350,
};
Interface 확장
interface Book {
page: number;
title: string;
}
interface Magazine extends Book {
cycle: "daily" | "weekly" | "monthly" | "yearly";
}
const jump: Magazine = {
cycle: "weekly",
oage: 300,
title: "週刊少年ジャンプ",
};
//type Aliasを継承してみる。
type BookType = {
page: number;
title: string;
};
interface Handbook extends BookType {
theme: string;
}
//最後はInterfaceの型で変数を作成する。
const nijiiro: HandBook = {
page: 138,
title: "にじいろ",
theme: "旅行",
};
Interface를 사용하여 class에서 유형을 정의합니다.
interface Book {
page: number;
title: string;
}
//Bookを実装するComicと読めば良い。
//Bookを実装するComicは必ずpage、titleというプロパティを持つ
class Comic implements Book {
page: number;
title: string;
constructor(page: number, title: string, private publishYear: string) {
this.page = page;
this.title = title;
}
getPublishYear() {
return this.title + "が発売されたのは" + this.publishYear + "年です。";
}
}
const popularComic = new Comic(200, "鬼滅の刃", 2016);
Type Alias와 Interface의 차이점
Type Alias
용도: 여러 곳에서 재사용하는 유형에 이름을 짓는다.
확장성: 같은 이름의 형식을 설명하는 중 오류 발생
상속: 상속할 수 없는 교차형으로 새로운 유형 별명 만들기
사용 가능한 유형: 대상 함수 외에 원시, 그룹, 원조도 성명할 수 있습니다
고려사항: 확장하기 어려운 불편이 있습니다.
사용 시기: 어플리케이션 개발 중인 Type Alias
Interface
용도: 대상, 클래스, 함수의 구조를 정의한다
확장: 같은 이름의interface를 성명할 때 병합 (병합 성명)
extends에서 계승할 수 있습니다
사용 가능한 유형: 객체 및 함수 유형만 선언할 수 있습니다.
고려 사항: 확장을 통해 오류가 발생할 수 있음
사용 시기: 라이브러리 개발에서 Interface
함수에 틀을 붙이다
매개 변수와 되돌아오는 값을 모형화하다.
function add(num1: number, nunm2: number): number {
return num1 + num2;
}
Void형
함수라면 아무것도 되돌려주지 않는 것은 어떨까요?
TypeScript에는
:형이 존재하지만 함수의 유형 정의에서 사용하면 오류가 발생하기 때문에 거의 나타나지 않습니다.그러나 함수의 마지막 존재'small' | 'medium' | 'large'는 undefined 유형을 사용할 수 있다.따라서 함수가 되돌아오는 경우
return는 유형 정의undefined에서 사용된다.function sayHello(): void {
console.log("Hello");
}
// 実行するとundefindを一応返す。
// なのでundefined型も存在する。
let tmp: undefined;
공이형
let tmpNull: null = null; //ok
let tmpNull: null = undefined; //ok
//この逆でundefinedにnullをいれても良い。
무명 함수 형식 쓰기
const anotherAdd: (n1: numebr, n2: number) => number = function (
num1: number,
num2: number
): number {
return num1 + num2;
};
//片方の型を省略できる。
const anotherAdd: (n1: numebr, n2: number) => number = function (
num1,
num2
): number {
return num1 + num2;
};
함수 유형
const doubleNumber = (num: number): num => num * 2;
//こんな感じに型定義をずらす事もできる。 //戻り値の型
const doubleNumber2: (num: number) => number = (num) => num * 2;
호출 함수 형식 쓰기
함수 자체에 반환 값이 없습니다.첫 번째 파라미터는number형을 가지고 있고, 두 번째 파라미터는 함수이며, 그 함수의 파라미터는number형을 가지고 있으며, 반환값도number형을 되돌려준다.
function doubleAndHandle(num: number, cb: (num: number) => number): void {
const doubleNum = cb(num * 2);
console.log(num * 2);
}
// コールバック関数の引数にはdoubleAndHandleの第一引数が入る。
doubleAndHandle(21, (doubleNum) => {
return doubleNum;
});
//仮にコールバック関数の戻り値をvoidの型にするとエラーは起きないが戻り値は無効となり使用出来なくなる。
function doubleAndHandle(num: number, cb: (num: number) => number): void {
const doubleNum = cb(num * 2);
//if(doubleNum) //doubleNum.toString()とかにするとエラーになる。
console.log(doubleNum);
}
doubleAndHandle("21", (doubleNum) => {
return doubleNum;
});
Generics（Generics）
이른바 genelix는 추상적인 모델을 사용하여 실제 사용될 때까지 모델이 확정되지 않은 클래스, 함수, 인터페이스를 실현한다.
일반 유형 정의
// number型 関数の引数・戻り値は数値と型定義している
function test(arg: number): number {
return arg;
}
// 上記の文字列版
function test2(arg: string): string {
return arg;
}
test(1);
test2("hello");
// ここで型を定義しないで関数を使用する際に型定義する
function test<T>(arg: T): T {
return arg;
}
test<number>(1);
test<string>("hello");
Any형·Unknow형
let unknownInput: unknown;
let anyInput: any;
let text: string;
unknownInput = "hello";
unknownInput = 21;
unknownInput = true;
text = anyInput; //エラーにならない。使うときもエラーにならない。
text = unknownInput; //ここでエラーになる。何でも入れられるが使うときに注意がでる。
//unknownの使い方 stringの型が来たときのみ代入する。
if (typeof unknownInput === "string") {
text = unknownInput;
}
Never형
오류를 포착하는 함수 등의 반환값으로 사용됩니다.
또한 순환에서 계속 순환하는 함수의 반환값에도 사용할 수 있다.
// もしneverが書かれていない場合、TypeScriptの型推論ではvoid型になる。
// 理由はnever自体が新しい型でバージョンから登場してまだ追いついていない。
function error(message: string): never {
throw new Error(message);
}
console.log(error("This is an error"));
최후
조사에 앞서 스트링, 넘버 등 매개 변수 유형을 미리 알았더라도 쉽게 읽을 수 있었다.나는 대상의 유형, 배열의 유형으로 금형을 상세하게 설정할 수 있다는 것을 알고 있다. 확실히 되돌아오는 Json 파일의 유형 등을 쓰면 나중에 코드를 읽어도 실제 실행할 기회를 줄이고 효율을 높일 수 있다.아직 도중이라 여러가지를 배우고 싶어요.
보도에 대한 평론 등
🕊:
📺:
📸:
👨🏻💻: Github
😥: Stackoverflow
하지만 접수는어디야?
인용하다
유형 정의 파일(.d.ts) - Bank
TypeScript error TS 2307:Cannet find module‘fs’。@types/node 패키지를 설치하면 해결됩니다.[2020]
npx 명령은 무엇입니까?뭘 할 수 있어요?
'tsc command not found' in compiling typescript
[Type Script] 이해Generics(클래식) - Qita
Reference
이 문제에 관하여(Type Script에 손을 댄 적은 없지만 유형을 요약해 봤습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/unemployed/articles/typescript-kata텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
