Webpack projemize typescript eklemek ve typescript ile kodumuzu yazmak istiyorsak aşağıdaki adımları takip etmemiz gerekiyor. Bu adımları uygularsak başarılı bir şekilde typescript kodlarımızı çalıştırabiliriz.
Öncelikle aşağıdaki komutu çalıştırarak gerekli paketleri projemize dahil ediyoruz.
yarn add -D typescript ts-loader @types/node @types/react @types/react-dom
Bu paketlerden kısaca bahsetmek gerekirse;
- typescript : Typescript'in ana paketidir.
- ts-loader : Typescript'in webpack'e dahil edilmesi için gerekli olan ve typescript kodlarının yorumlanmasını ve js dosyasına çevrilmesini sağlayan webpack paketidir.
- @types/node , @types/react , @types/react-dom paketleri node,react ve react dom için definitions ve kuralları kapsar.
Ardından package.json dosyamız ile aynı dizine bir tsconfig.json isminde bir dosya açıyoruz. Ve içeriğini şu şekilde dolduruyoruz.
{compilerOptions: {"outDir": "./dist","noImplicitAny": true,"module": "es6","target": "es5","jsx": "react","allowJs": true,"allowSyntheticDefaultImports": true,"moduleResolution": "Node","exclude": ["node_modules"]}}
Eğer tüm config ayarlarının olduğu bir tsconfig.json oluşturmak isterseniz aşağıdaki komutları kullanarak otomatik olarak oluşturabilirsiniz.
npx tsc –init veya yarn tsc –init
Sonrasında aşağıdaki şekilde loader'ımızı webpack config dosyamızda yapılandırıyoruz. "Rules" olarak belirtilen dizi içerisine aşağıdaki kodu ekliyoruz. Koda göz attığınızda tahmin edebileceğiniz gibi, ".tsx" dosyalarımızı bu loader okuyacak ve işleyecektir.
{test: /\.tsx?$/,exclude: /node_modules/,use: ['ts-loader']}
Bu şekilde typescript'i dahil etmiş oluruz. Bunun haricinde modüllerimizi birbirleri içerisinde kullanırken çözümleyebilmesi için webpack'e ts ve tsx uzantılarımızı tanıtmamız gerekiyor. Webpack default olarak bu uzantılı dosyaları tanıyamaz. Bunu da webpack config dosyamızda "modules" içerisine aşağıdaki değeri ekleyerek sağlıyoruz.
resolve: {extensions: ['.tsx', '.ts']}
