Type Scriptベースの整理
4787 ワード
TypeScriptとは?
Microsoftが開発/管理するオープンソースプログラミング言語.
Typescriptは静的なタイプの言語なので、コンパイルに少し時間がかかっても安定性を確保できます.
既存のJavascriptは動的タイプ言語であるため、速度は速いが、タイプの安定性は保証されていない.
TypeScriptは、これらのJavaScriptの欠点を補うために作成されたものです.
既存のJavascriptでは、タイプを必要とせずに簡単に作成できる利点は、プロジェクトが大きいほど欠点が大きいことです.
簡単な例で説明しましょう.
// js
5 - '3' // 2
// ts
5 - '3' // Uncaught SyntaxError: Unexpected number
// error 산술 연산 오른쪽은 'any', 'number', 'bigint' 또는 열거형 형식이어야 합니다.
既存のJavascriptではnumber-stringを使用できますが、Type scriptでは不可能なためエラーが発生します.今は簡単な例で、コードは短くて簡単ですが、実際のプロジェクトのコード量が大きく、他の人のコードを修正する必要がありますか?
もう少し時間がかかっても、安定性が高く、エラーをコントロールできるタイプスクリプトを使いたいです.
Typescriptの使用方法
一般的なHTML CSS JS Web開発での応用方法とReactプロジェクトでの応用方法について説明します.
npm install -g typescript
ユーザーにタイプスクリプトコンパイラをローカルにインストールします.編集として作業するフォルダを選択して開きます.
作業フォルダにあります.TSで終わるファイルを作成すると、タイプスクリプトの使用が開始されます.
Webブラウザではtsファイルを認識できないため、jsファイルに変換する必要があります.
//터미널에 아래와 같이 입력하면 ts파일이 자동으로 js 파일로 변환된다.
tsc -w
HTMLファイルなどでタイプスクリプトで記述されたコードを使用するには、変換後のjsファイルを使用する必要があります.<script src="변환된파일.js"></script>
2-1. 作成したプロジェクトにインストールする場合は、作業フォルダパスで端末を開き、次のように入力します.
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
インストールが完了したら、端末にtsc-wを入力してjs変換操作を行います.tsc -w
2-2. 新しいReactプロジェクトを作成する場合は、作業するフォルダを作成し、エディタと端末を開き、次のように入力します.npx create-react-app my-app --template typescript
同様にjs変換作業のためにtsc-wを入力することを忘れないでください.Typeスクリプトのコンパイル時の設定の詳細
プロジェクトフォルダでtsconfigを使用します.jsonファイル(react使用時)がある場合は、新規作成(一般Web開発時)後、jsonファイル内に次のコードを記述します.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
}
}
targetは、タイプスクリプトファイルをどのバージョンに変換するかを指定するJavaScriptの一部です.moduleはjavascriptファイル間のimport構文を実装する際にどの構文を使用するかの一部です.
次はtsconfigに入る他の項目です.より詳細な内容はhttps://www.typescriptlang.org/tsconfigで確認できます.
{
"compilerOptions": {
"target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
"module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
"allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지
"checkJs": true, // 일반 js 파일에서도 에러체크 여부
"jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
"declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
"outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
"outDir": "./", //js파일 아웃풋 경로바꾸기
"rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
"removeComments": true, //컴파일시 주석제거
"strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
"noImplicitAny": true, //any타입 금지 여부
"strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기
"strictFunctionTypes": true, //함수파라미터 타입체크 강하게
"strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
"noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
"alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기
"noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
"noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
"noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기
"noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기
}
}
参照:https://codingapple.com/course/typescript-crash-course/Reference
この問題について(Type Scriptベースの整理), 我々は、より多くの情報をここで見つけました https://velog.io/@qlemql/Typescript-기초-정리テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol